<template>
    <div>
        <h1 class="test">学生姓名：{{name}}</h1>
        <h1>性别：{{sex}}</h1>
        <h1>年龄：{{age}}</h1>
        <button @click="addAge">点我年龄加1</button>
        <button @click="showName">点我提示名称</button>
        <button @click="name = name + 'x'">点我修改姓名</button>
        <input type="text" v-fbind="name" />
        <span v-big="age"></span>
        <button @click="sendStudentName">发送学生姓名</button>
    </div>    
</template>

<script>
import { myMixin1 } from '@/mixin'

export default {
    name: 'Student',
    data() {
        return {
            name: '张三',
            sex: '男',
            age: 18
        }
    },
    methods:{
        addAge() {
            this.age++
        },
        sendStudentName() {
            // this.$bus.$emit('receiveStuentName', this.name)
            this.$pubsub.publish('receiveStuentName', this.name)
        }
    },
    mixins: [myMixin1],
    directives:{
        big(element, binding) {
            element.innerText = binding.value * 10
        }
    }
}
</script>

<style scoped>
    .test {
        background-color: skyblue;
    }
</style>